<template>
  <div>
    <el-card>
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker size="mini" style="width:100%;" v-model="form.startDate" type="date"
                value-format="yyyyMMdd" placeholder="开始日期" :picker-options="pickerOptionsStart" @change="changeStart">
              </el-date-picker>
              <!-- <el-input v-model="form.startDate" placeholder="请输入开始日期"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker style="width:100%;" size="mini" v-model="form.endDate" type="date" value-format="yyyyMMdd"
                placeholder="结束日期" :picker-options="pickerOptionsEnd" @change="changeEnd">
              </el-date-picker>
              <!-- <el-input v-model="form.endDate" placeholder="请输入结束日期"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="警告标志" prop="WARNFLAG">
              <!-- <el-select size="mini" clearable v-model="form.STATUS" placeholder="请选择申请状态"
                style="width:100%;">
                <el-option v-for="item in statusOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select> -->
              <el-input v-model="form.WARNFLAG" placeholder="请输入警告标志"></el-input>
            </el-form-item>
          </el-col>

          <el-col :lg="4" :md="6">
            <el-form-item label="交易类型" prop="STATUS">
              <el-select size="mini" clearable v-model="form.TRANSTYPE" placeholder="请选择交易类型"
                style="width:100%;">
                <el-option v-for="item in statusOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <!-- <el-input v-model="form.STATUS" placeholder="请选择申请状态"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="机构" prop="BRANCHNO">
              <select-tree :branch="form.branch.BRANCHNAME" @getBranchName="getBranch">
              </select-tree>
            </el-form-item>
          </el-col>
          <el-col :lg='24' :md='12' style="margin-top:8px;">
            <el-button type="primary" icon="el-icon-search" size='mini' @click="queryData">查询
            </el-button>
            <el-button type="warning" size="mini" icon="el-icon-refresh" @click="resetForm('form')">重置</el-button>
            <!-- <el-button type="primary" size="mini" icon="el-icon-plus" @click="applicate">新增换班申请</el-button> -->
          </el-col>
        </el-row>
      </el-form>
      <!-- <el-row>
        <el-col :span="2">
          <el-button type="primary" size="small" @click="applicate">换班申请</el-button>
        </el-col>
        <el-col :span="2" :offset="19">
          <el-select size="small" v-model="queryType" @change="getScheduleApplication" style="width:130px">
            <el-option v-for="item in queryTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row> -->
      <br />
      <el-row>
        <el-table :data="tableData">
          <el-table-column prop="STARTTIME" label="开始时间" align="center" width="120">
             <template slot-scope="scope">
              <div>
                {{scope.row.STARTTIME | timeFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ENDTIME" label="结束时间" align="center" width="120">
            <template slot-scope="scope">
             <div>
               {{scope.row.ENDTIME | timeFormat}}
             </div>
           </template>
         </el-table-column>
          <el-table-column prop="TRANSTYPE" label="交易类型" align="center" width="120" :formatter='transTypeFormat'></el-table-column>
          <el-table-column prop="REQUIREDMANPOWER" label="所需人力" align="center" width="120"></el-table-column>
          
          <el-table-column prop="AVERAGESPEED" label="平均服务速率" align="center" width="120"></el-table-column>
          <el-table-column prop="SHAREOFWORK" label="柜员工时占有率" align="center" width="120"></el-table-column>
        
          
          <el-table-column prop="MAXWAITTIME" label="最长等待时长" align="center" width="120">
          </el-table-column>
          <el-table-column prop="AVERAGETRANSNUM" label="平均业务量" width="100"></el-table-column>
          
        </el-table>
      </el-row>
      <!-- <el-dialog title="换班申请" :visible.sync="showDialog" :lock-scroll=false>
        <el-form ref="form" :model="info">
          <el-form-item>
            用
            <el-date-picker size="small" type="date" placeholder="选择日期" v-model="info.myDate" style="width:200px"
              @change="changeMyDate"></el-date-picker>
            的我的
            <el-select size="small" v-model="info.mySchedule" placeholder="请选择" style="width:200px">
              <el-option v-for="item in mySchedules" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            调换
            <el-date-picker size="small" type="date" placeholder="选择日期" v-model="info.otherDate" style="width: 200px"
              @change="changeOtherDate"></el-date-picker>
            的
            <el-select size="small" v-model="info.otherSchedule" placeholder="请选择" style="width: 200px">
              <el-option v-for="item in others" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            进行双向调换
          </el-form-item>
          <el-form-item>
            我需要在
            <el-date-picker size="small" type="date" placeholder="选择日期" v-model="info.lastTime" style="width:200px">
            </el-date-picker>
            之前得到答复
          </el-form-item>
          <el-form-item label="协商注释">
            <el-input size="small" type="textarea" v-model="info.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="submit">立即创建</el-button>
          <el-button type="default" size="small" @click="closeDialog">取消</el-button>
        </span>
      </el-dialog> -->
      <!-- <el-dialog :title="dialogTitle" :visible.sync="dialogFlag" :lock-scroll=false>
        <el-form ref="form" :model="info">
          <el-form-item>
            <p style="font-size:0.9rem;">
            &nbsp;&nbsp;&nbsp;&nbsp;坐席编号{{dialogInfo.AGENTID+'，姓名'+dialogInfo.AGENTNAME}}，申请将其于{{dialogInfo.CLASSESDATE | timeFormat}}的{{dialogInfo.CLASSESNAME}}与换班人坐席编号为{{dialogInfo.EXCHAGENTID+'，姓名'+dialogInfo.EXCHAGENTNAME}}于{{dialogInfo.EXCHCLASSESDATE | timeFormat}}的{{dialogInfo.EXCHCLASSESNAME}}进行双向调换，我需要在{{dialogInfo.LATESTTIME | timeFormat}}之前得到答复，望批准，谢谢！
            </p>
          </el-form-item>
          <el-form-item label="应答注释" v-if="dialogTitle == '换班申请应答'">
            <el-input size="small" type="textarea" v-model="NOTE2"></el-input>
          </el-form-item>
          <el-form-item label="审批注释" v-if="dialogTitle == '换班申请审批'">
            <el-input size="small" type="textarea" v-model="NOTE3"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" v-if="dialogTitle == '换班申请应答'">
          <el-button type="primary" size="small" @click="answer('agree', dialogData)">同意</el-button>
          <el-button type="default" size="small" @click="answer('refuse', dialogData)">拒绝</el-button>
        </span>
        <span slot="footer" class="dialog-footer" v-if="dialogTitle == '换班申请审批'">
          <el-button type="primary" size="small" @click="verify('agree', dialogData)">同意</el-button>
          <el-button type="default" size="small" @click="verify('refuse', dialogData)">拒绝</el-button>
        </span>
      </el-dialog> -->
    </el-card>
  </div>
</template>
<script>
import request from "@/common/utils/requestWFM";
import query from '@/message/wfm/FTEForecast/FTEForecastQuery/query';
import toolBox from '@/common/utils/toolBox'
import selectTree from "@/components/selectTree5/"
  export default{
    components: {
      selectTree
    },
    filters:{
      timeFormat(val){
        if(val == ''){
          return ''
        }
        return toolBox.timeFormat(val)
      },
    },
    data(){
      return {
        tableData:[],
        form: { //表单数据
          startDate: '',
          endDate: '',
          branch: {
            BRANCHNO: this.$store.getters.BranchNum,
            BRANCHNAME: this.$store.getters.BranchName
          },
          QUERYTYPE: '1',
          STATUS: ''
        },
        statusOption: [{
            label: '对私',
            value: '01'
          },
          {
            label: '对公',
            value: '02'
          },
        ],
        isShow: false
      }
    },
    methods: {
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      transTypeFormat(row, column) {
        if (row.TRANSTYPE == "01") {
          return "对私";
        } else if (row.TRANSTYPE == "02") {
          return "对公";
        } else {
          return "";
        }
      },
      async queryData(){
        let that = this;
        let resBody = new query();
        resBody.data.STARTDAY = this.form.startDate;
        resBody.data.ENDDAY = this.form.endDate;
        resBody.data.WARNFLAG = this.form.WARNFLAG;
        resBody.data.TRANSTYPE = this.form.TRANSTYPE;
        resBody.data.BRNO = this.form.branch.BRANCHNO;
        let response =await request(resBody);
        console.log(response)
        if (response.SYS_HEAD.ReturnStatus == 'S') {
          this.tableData = response.BODY.struct
        }else{
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      getBranch(data) {
        this.form.branch.BRANCHNO = data.BRANCHNO
        this.form.branch.BRANCHNAME = data.BRANCHNAME
      },
      changeStart() {
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.form.startDate) {
              return time.getTime() < Date.parse(this.form.startDate.slice(0, 4) + '-' + this.form
                .startDate.slice(4, 6) +
                '-' + this.form.startDate.slice(6, 8)) - 8.64e7
            } else {
              return time.getTime() < Date.now();
            }
          }
        })
      },
      changeEnd() {
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.form.endDate) {
              return time.getTime() > Date.parse(this.form.endDate.slice(0, 4) + '-' + this.form.endDate
                .slice(4, 6) + '-' +
                this.form.endDate.slice(6, 8))
            } else {
              // return time.getTime() < Date.now();
            }
          }
        })
      },
    },
    created(){
      this.form.startDate = toolBox.getCurrentMonthFirstDay();
      this.changeStart();
      this.form.endDate = toolBox.getCurrentMonthLastDay();
      this.changeEnd();
    },
    mounted() {
      this.queryData()
    },
  }
</script>